
<template>
  <div class="ui-zhrtc-toolbar">
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" @click="onImport($event)">
        <UIIcon :icon="icon_import"/>
        <span>{{t('views.rtcurve.toolbar.import')}}</span>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" @click="onExport($event)">
        <UIIcon :icon="icon_export"/>
        <span>{{t('views.rtcurve.toolbar.export')}}</span>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col">
      <div v-if="false" class="ui-button ui-zhrtc-full-btn" @click="onPrint($event)">
        <UIIcon :icon="icon_print"/>
        <span>{{t('views.rtcurve.toolbar.print')}}</span>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col-sep"></div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-zhrtc-toolbar-col-row">
        <div class="ui-button" @click="onZoomIn($event)">
          <UIIcon :icon="icon_zoom_in"/>
          <span>{{t('views.rtcurve.toolbar.zoomIn')}}</span>
        </div>
      </div>
      <div class="ui-zhrtc-toolbar-col-row">
        <div class="ui-button" @click="onZoomOut($event)">
          <UIIcon :icon="icon_zoom_out"/>
          <span>{{t('views.rtcurve.toolbar.zoomOut')}}</span>
        </div>
      </div>
      <div class="ui-zhrtc-toolbar-col-row">
        <div class="ui-button" @click="onResetZoom($event)">
          <UIIcon :icon="icon_zoom_resume" />
          <span>{{t('views.rtcurve.toolbar.zoomResume')}}</span>
        </div>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" :class="{'selected': !!viewSetting.fitWindow}" @click="onFitWindow($event)">
        <UIIcon :icon="icon_fit_window" />
        <span>{{t('views.rtcurve.toolbar.fitWindow')}}</span>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" @click="onScale($event)">
        <UIIcon :icon="icon_scale_setting" />
        <span>{{t('views.rtcurve.toolbar.scale')}}</span>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col-sep"></div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-zhrtc-toolbar-col-row">
        <div class="ui-button" :class="{'selected': !!viewSetting.mouseCrosshair}" @click="onMouseCrosshair($event)">
          <UIIcon :icon="icon_mouse_cross" />
          <span>{{t('views.rtcurve.toolbar.mouseCross')}}</span>
        </div>
      </div>
      <div class="ui-zhrtc-toolbar-col-row">
        <div class="ui-button" :class="{'selected': !!viewSetting.mouseTooltip}" @click="onMouseTooltip($event)">
          <UIIcon :icon="icon_mouse_tip" />
          <span>{{t('views.rtcurve.toolbar.mouseTip')}}</span>
        </div>
      </div>
      <div class="ui-zhrtc-toolbar-col-row">
        <div class="ui-button" :class="{'selected': !!viewSetting.showHeader}" @click="onShowHeader($event)">
          <UIIcon :icon="icon_show_header" />
          <span>{{t('views.rtcurve.toolbar.showHeader')}}</span>
        </div>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" :class="{'selected': !!viewSetting.autoScrolling}" @click="onAutoScrolling($event)">
        <UIIcon :icon="icon_auto_scroll" />
        <span>{{t('views.rtcurve.toolbar.autoScroll')}}</span>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col-sep"></div>
    <!-- <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" @click="onRefreshRate($event)">
        <UIIcon :icon="icon_refresh_rate" />
        <span>{{t('views.rtcurve.toolbar.refreshRate')}}</span>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col-sep"></div> -->
    <div class="ui-zhrtc-toolbar-col">
      <!-- <div class="ui-button ui-zhrtc-full-btn" @click="onTimeTravel($event)">
        <UIIcon :icon="icon_time_travel" />
        <span>{{t('views.rtcurve.toolbar.timeTravel')}}</span>
      </div> -->
      <div class="ui-zhrtc-toolbar-col-row horizontal-row">
        <div style="padding-left: 2px;">{{t('views.rtcurve.toolbar.startTime')}}:</div>
        <el-date-picker
          v-model="startTime"
          value-format="YYYY-MM-DD hh:mm:ss"
          :placeholder="t('views.rtcurve.toolbar.datapickerPlaceholder')"
          type="datetime"
        />
      </div>
      <div class="ui-zhrtc-toolbar-col-row horizontal-row">
        <div style="padding-left: 2px;">{{t('views.rtcurve.toolbar.endTime')}}:</div>
        <el-date-picker
          v-model="endTime"
          value-format="YYYY-MM-DD hh:mm:ss"
          :placeholder="t('views.rtcurve.toolbar.datapickerPlaceholder')"
          type="datetime"
        />
      </div>
      <div class="ui-zhrtc-toolbar-col-row horizontal-row">
        <div class="ui-button" style="width: 32.66%; text-align: center; line-height: 22px; margin-right: 1%; border: solid 1px rgba(125, 125, 125, 0.24);" @click="onTimeTravel($event)">
          <!-- <UIIcon :icon="icon_time_travel" /> -->
          <span>{{t('views.rtcurve.toolbar.previousDay')}}</span>
        </div>
        <div class="ui-button selected" style="width: 32.66%; text-align: center; line-height: 22px; margin-right: 1%; border: solid 1px rgba(125, 125, 125, 0.24);" @click="onTimeTravel($event)">
          <!-- <UIIcon :icon="icon_time_travel" /> -->
          <span>{{t('views.rtcurve.toolbar.toDay')}}</span>
        </div>
        <div class="ui-button" style="width: 32.66%; text-align: center; line-height: 22px; border: solid 1px rgba(125, 125, 125, 0.24);" @click="onTimeTravel($event)">
          <!-- <UIIcon :icon="icon_time_travel" /> -->
          <span>{{t('views.rtcurve.toolbar.nextDay')}}</span>
        </div>
      </div>
    </div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" :class="{'selected': !!viewSetting.autoRefresh}" @click="onAutoRefresh($event)">
        <UIIcon :icon="icon_auto_refresh" />
        <span>{{t('views.rtcurve.toolbar.autoRefresh')}}</span>
      </div>
    </div>
    <!-- <div class="ui-zhrtc-toolbar-col-sep"></div> -->
    <div class="ui-zhrtc-toolbar-col-sep"></div>
    <div class="ui-zhrtc-toolbar-col">
      <div class="ui-button ui-zhrtc-full-btn" :class="{'selected': showParams}" @click="onShowParams($event)">
        <UIIcon :icon="icon_indicator_area" />
        <span>{{t('views.rtcurve.toolbar.indicatorArea')}}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {
  icon_import,
  icon_export,
  icon_print,
  icon_zoom_out,
  icon_zoom_in,
  icon_zoom_resume,
  icon_fit_window,
  icon_mouse_cross,
  icon_mouse_tip,
  icon_show_header,
  icon_auto_scroll,
  icon_refresh_rate,
  icon_auto_refresh,
  icon_time_travel,
  icon_scale_setting,
  icon_indicator_area
} from '@/components/UIIcon/svgicons';
import { modal, NumberInput, popupManager } from 'neurons';
import { IPlottingScale } from 'well-log-vis/entity/welllog';
import { propTypes } from '@/utils/propTypes';
import { formatter } from 'well-log-vis';

const { t } = useI18n();

defineOptions({ name: 'RTCurveToolbar' });
const props = defineProps({
  scale: {
    type: Object,
    default: () => {
      return {
        // 时间比例尺（1cm:m）：每一厘米多少分钟
        timeScale: 3,
        // 时间刻度（分钟）：每个刻度多少分钟
        timeInterval: 10,
        // 距离比例尺(1mm:?)：每一毫米多少物理距离
        distanceScale: 500,
        // 距离刻度(?) - 每个刻度多少物理距离，该单位不确定，应与距离字段单位相同
        distanceInterval: 15000,
      }
    },
  },
  viewSetting: {
    type: Object,
    default: () => {
      return {
        fitWindow: false,
        autoRefresh: false,
        mouseCrosshair: true,
        mouseTooltip: true,
        showHeader: false,
        autoScrolling: false,
      }
    }
  },
  showParams: {
    type: Boolean,
    default: true,
  }
});

const scaleSetting = ref({
  timeScale: props.scale.timeScale,
  timeInterval: props.scale.timeInterval,
  distanceScale: props.scale.distanceScale,
  distanceInterval: props.scale.distanceInterval,
});
watch(
  () => props.scale,
  () => {
    scaleSetting.value = {
      timeScale: props.scale.timeScale,
      timeInterval: props.scale.timeInterval,
      distanceScale: props.scale.distanceScale,
      distanceInterval: props.scale.distanceInterval,
    };
  },
)

const showParams = ref(props.showParams);
watch(
  () => props.showParams,
  () => (showParams.value = props.showParams),
)
const viewSetting = ref({
  fitWindow: props.viewSetting.fitWindow,
  autoRefresh: props.viewSetting.autoRefresh,
  mouseCrosshair: props.viewSetting.mouseCrosshair,
  mouseTooltip: props.viewSetting.mouseTooltip,
  showHeader: props.viewSetting.showHeader,
  autoScrolling: props.viewSetting.autoScrolling,
})

const toDay = new Date();
const startTime = ref(formatter.formatDateTime(new Date(toDay.getFullYear(), toDay.getMonth(), toDay.getDate(), 0, 0, 0), {format: 'yyyy-MM-dd hh:mm:ss'}));
const endTime = ref(formatter.formatDateTime(new Date(toDay.getFullYear(), toDay.getMonth(), toDay.getDate(), 23, 59, 59), {format: 'yyyy-MM-dd hh:mm:ss'}));

const emit = defineEmits(['import', 'export', 'print', 'viewSetting', 'refreshRate', 'timeTravel', 'scale', 'resetZoom', 'showParams']);

const onImport = (event) => {
  emit('import', event);
}
const onExport = (event) => {
  emit('export', event);
}
const onPrint = (event) => {
  emit('print', event);
}
const onZoomIn = (event) => {
  // 时间轴
  const timeScale = scaleSetting.value.timeScale;
  // 以1cm:3分钟为基准，每次增加3cm
  scaleSetting.value.timeScale = 3 / ((3 / timeScale) + 1);
  emit('scale', {
    value: {...scaleSetting.value},
    causeEvent: event,
  });
}
const onZoomOut = (event) => {
  // 时间轴
  const timeScale = scaleSetting.value.timeScale;
  scaleSetting.value.timeScale = 3 / timeScale > 1 ? 3 / ((3 / timeScale) - 1) : 3;
  emit('scale', {
    value: {...scaleSetting.value},
    causeEvent: event,
  });
}
const onResetZoom = (event) => {
  emit('resetZoom', event);
}
const onFitWindow = (event) => {
  viewSetting.value.fitWindow = !viewSetting.value.fitWindow;
  emit('viewSetting', {
    value: {...viewSetting.value},
    causeEvent: event,
  });
}
const onMouseCrosshair = (event) => {
  viewSetting.value.mouseCrosshair = !viewSetting.value.mouseCrosshair;
  emit('viewSetting', {
    value: {...viewSetting.value},
    causeEvent: event,
  });
}
const onMouseTooltip = (event) => {
  viewSetting.value.mouseTooltip = !viewSetting.value.mouseTooltip;
  emit('viewSetting', {
    value: {...viewSetting.value},
    causeEvent: event,
  });
}
const onShowHeader = (event) => {
  viewSetting.value.showHeader = !viewSetting.value.showHeader;
  emit('viewSetting', {
    value: {...viewSetting.value},
    causeEvent: event,
  });
}
const onAutoScrolling = (event) => {
  viewSetting.value.autoScrolling = !viewSetting.value.autoScrolling;
  emit('viewSetting', {
    value: {...viewSetting.value},
    causeEvent: event,
  });
}
const onAutoRefresh = (event) => {
  viewSetting.value.autoRefresh = !viewSetting.value.autoRefresh;
  emit('viewSetting', {
    value: {...viewSetting.value},
    causeEvent: event,
  });
}
const onRefreshRate = (event) => {
  emit('refreshRate', event);
}
const onTimeTravel = (event) => {
  emit('timeTravel', event);
}
const onScale = (event: MouseEvent) => {
  const state = {
    timeScale: scaleSetting.value.timeScale,
    timeInterval: scaleSetting.value.timeInterval,
    distanceScale: scaleSetting.value.distanceScale,
    distanceInterval: scaleSetting.value.distanceInterval,
    changed: false,
    t: t,
    onChange: () => {
      state.changed = true;
    }
  }
  modal({
    title: t('views.rtcurve.toolbar.scaleTitle'),
    body: {
      source: `
        <div class="ui-zhrtc-scale-popup">
          <div class="ui-zhrtc-scale-label">{{t('views.rtcurve.toolbar.scaleTimeLabel')}}</div>
          <div class="ui-zhrtc-scale-row">
            <span>1{{t('views.rtcurve.toolbar.scaleCM')}}:</span>
            <ne-number-input [(value)]="timeScale" (change)="onChange()"></ne-number-input>
            <span>{{t('views.rtcurve.toolbar.scaleMinus')}}</span>
          </div>
          <div class="ui-zhrtc-scale-row">
            <span>{{t('views.rtcurve.toolbar.scalePer')}}</span>
            <ne-number-input [(value)]="timeInterval" (change)="onChange()"></ne-number-input>
            <span>{{t('views.rtcurve.toolbar.scaleMinus')}} {{t('views.rtcurve.toolbar.scaleShowATick')}}</span>
          </div>
          <div class="ui-zhrtc-scale-sep"></div>
          <div class="ui-zhrtc-scale-label">{{t('views.rtcurve.toolbar.scaleDistanceLabel')}}</div>
          <div class="ui-zhrtc-scale-row">
            <span>1{{t('views.rtcurve.toolbar.scaleMM')}} {{t('views.rtcurve.toolbar.scaleScreenDistance')}}:</span>
            <ne-number-input [(value)]="distanceScale" (change)="onChange()"></ne-number-input>
            <span>{{t('views.rtcurve.toolbar.scaleActualDistance')}}</span>
          </div>
          <div class="ui-zhrtc-scale-row">
            <span>{{t('views.rtcurve.toolbar.scalePer')}}</span>
            <ne-number-input style="width: 116px;" [(value)]="distanceInterval" (change)="onChange()"></ne-number-input>
            <span>{{t('views.rtcurve.toolbar.scaleActualDistance')}} {{t('views.rtcurve.toolbar.scaleShowATick')}}</span>
          </div>
        </div>
      `,
      state: state,
    },
    onOk: () => {
      if (!state.changed) return;
      scaleSetting.value.timeScale = state.timeScale;
      scaleSetting.value.timeInterval = state.timeInterval;
      scaleSetting.value.distanceScale = state.distanceScale;
      scaleSetting.value.distanceInterval = state.distanceInterval;
      emit('scale', {
        value: {...scaleSetting.value},
        causeEvent: event,
      });
    },
    requirements: [
      NumberInput
    ]
  })
}
const onShowParams = (event) => {
  showParams.value = !showParams.value;
  emit('showParams', {
    value: showParams.value,
    causeEvent: event,
  });
}

onMounted(() => {})
</script>

<style lang="scss">

@import '@/styles/variables.scss';

.ui-zhrtc-toolbar {
  position: relative;
  width: 100%;
  height: 92px;
  font-size: 14px;
  white-space: nowrap;
  .ui-zhrtc-toolbar-col-sep {
    display: inline-block;
    vertical-align: top;
    width: 1px;
    height: 100%;
    padding: 4px 0;
    &:after {
      content: ' ';
      display: block;
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #CCC;
    }
  }
  .ui-zhrtc-toolbar-col {
    display: inline-block;
    vertical-align: top;
    padding: 4px;
    white-space: initial;
    .ui-zhrtc-toolbar-col-row {
      .ui-button {
        padding: 0px 12px;
        min-width: 52px;
        line-height: 26px;
        margin-bottom: 1px;
        & > * {
          display: inline-block;
          vertical-align: middle;
        }
        .ui-icon {
          font-size: 18px;
          margin-right: 4px;
        }
      }
      &.horizontal-row {
        white-space: nowrap;
        margin-bottom: 2px;
        & > * {
          display: inline-block;
          vertical-align: middle;
        }
        .el-date-editor {
          width: 196px;
          height: 26px;
          margin-left: 8px;
          input {
            line-height: 24px;
            height: 24px;
          }
        }
      }
    }
    .ui-zhrtc-full-btn {
      position: relative;
      width: 84px;
      height: 84px;
      text-align: center;
      border-radius: 4px;
      .ui-icon {
        position: relative;
        width: 100%;
        font-size: 40px;
      }
    }
  }
}

.ui-zhrtc-scale-popup {
  .ui-zhrtc-scale-sep {
    margin-bottom: 12px;
    border-bottom: solid 1px $grayHeavy;
    margin-top: 12px;
  }
  .ui-zhrtc-scale-label {
    padding-bottom: 5px;
    color: $blackHeavy;
  }
  .ui-zhrtc-scale-row {
    line-height: 38px;
    padding: 0 0 0 24px;
    & > span {
      display: inline-block;
    }
    .ne-number-input {
      margin: 0 8px;
      width: 86px;
    }
  }
}

</style>
